<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>首页 - 乐淘</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/tether.min.css">
    <link rel="stylesheet" href="css/bootstrap-vue.css">
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <div id="nav">
        <b-navbar toggleable type="inverse" variant="success">

            <b-nav-toggle target="nav_collapse"></b-nav-toggle>

            <b-link class="navbar-brand" to="home.html">
                <span>乐淘</span>
            </b-link>

            <b-collapse is-nav id="nav_collapse">

                <b-nav is-nav-bar>
                    <b-nav-item to="userpage.html">个人主页</b-nav-item>
                    <b-nav-item to="message.html">池子</b-nav-item>
                </b-nav>

                <b-nav is-nav-bar class="ml-auto">

                    <b-nav-item-dropdown right-alignment>

                        <!-- Using text slot -->
                        <template slot="text">
                            <span style="font-weight: bold;">{{ username }}</span>
                        </template>

                        <b-dropdown-item to="signin.html" v-if="isLogin==false">登录</b-dropdown-item>
                        <b-dropdown-item to="register.html" v-if="isLogin==false">注册</b-dropdown-item>
                        <b-dropdown-item v-on:click="logout" v-if="isLogin==true">登出</b-dropdown-item>
                    </b-nav-item-dropdown>

                </b-nav>
            </b-collapse>
        </b-navbar>
    </div>

    <div class="container" style="margin-top:20px;" >
        <div class="row">
            <div class="col-md-8" id="message" >
                <b-list-group v-if="nav.isLogin==1">

                    <b-alert state="success" dismissible :show="showSuccess" @dismissed="showSuccess=false">
                        添加成功
                    </b-alert>
                    <b-list-group-item active>发布消息</b-list-group-item>
                    <b-list-group-item >
                    <b-form-fieldset label="消息内容" :label-size="1">
                        <b-form-input v-model="newtext" class="col"></b-form-input>

                    </b-form-fieldset>
                    </b-list-group-item>
                    <b-button v-on:click="createMsg">
                        添加
                    </b-button>
                </b-list-group>
                <b-list-group class="col-md-4" style="margin-top:25px;" v-if="nav.isLogin==1">
                    
                    <b-btn @click="submit" >淘消息</b-btn>

                    <!-- Modal Component -->
                    <b-modal id="modal1" title="消息正文">

                        <form>
                            <div>{{text}}</div>
                        </form>

                    </b-modal>
                </b-list-group>
            <b-list-group class="col-md-8" v-if="nav.isLogin==0">
            <b-list-group-item active>无法显示详细内容，请先登录</b-list-group-item>
            </b-list-group>

            </div>
            <div class="col-md-4" id="top">
                <b-list-group>
                    <b-list-group-item active>今日消息top10</b-list-group-item>
                    <b-list-group-item>
                        暂无信息
                    </b-list-group-item>
                </b-list-group>
                <b-list-group>
                    <b-list-group-item active>今日池子top10</b-list-group-item>
                    <b-list-group-item>
                        <span><a class="list-block" v-for="pool in pools"  v-bind:href="'getmsg.html?id=' + pool.poolid">{{pool.name}}<br /></a></span>
                    </b-list-group-item>
                </b-list-group>
                <b-list-group>
                    <b-list-group-item active>今日用户top10</b-list-group-item>
                    <b-list-group-item>
                        暂无信息
                    </b-list-group-item>
                </b-list-group>
            </div>
        </div>
    </div>
</body>

<!-- 下面文件是vue的核心文件 -->
<script src="js/vue.min.js"></script>
<!-- 下面文件提供了http支持 -->
<script src="js/vue-resource.min.js"></script>
<!-- 下面文件提供了Cookie支持 -->
<script src="js/js.cookie.js"></script>
<!-- 下面文件是bootstrap-vue的核心文件 -->
<script src="js/tether.min.js"></script>
<script src="js/bootstrap-vue.js"></script>

<!-- 本文档的js主文件 -->
<script src="js/main.js"></script>

</html>